<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公告管理</title>
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/announcement.css">
  <link rel="stylesheet" href="../css/system.css">
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
  <script src="../js/swiper-bundle.min.js"></script>
  <script src="../js/jquery.min.js"></script>
</head>

<body>
  <header>
    <div class="headleft">
      <img src="../img/logo.png" alt="">
      <h3>智慧书城后台管理系统</h3>
    </div>
    <div class="headright">
      <p id="headRight"></p>
      <span>欢迎你, <i id="glname"></i></span>
      <button type="button" class="btn btn-outline-link" style="color: #ffff;" onclick="logout()">退出登录</button>
    </div>
  </header>
  <section>
    <aside>
      <div class="d-flex flex-column flex-shrink-0 p-3 bg-light col-lg-4" style="width: 280px;height: 100vh;;">
        <a href="##" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
          <img src="../img/logo.png" alt="" style="width: 100px;">
          <span class="fs-4">智慧书城</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="./SystemHomepage.html" class="nav-link link-dark" aria-current="page">
              <span class="iconfont icon-shangpinguanli"></span>
              <i>系统首页</i>
            </a>
          </li>
          <li class="nav-item">
            <a href="./goods.html" class="nav-link link-dark" aria-current="page">
              <span class="iconfont icon-shangpinguanli"></span>
              <i>商品管理</i>
            </a>
          </li>
          <li>
            <a href="./OrderManagement.html" class="nav-link link-dark">
              <span class="iconfont icon-dingdanguanli"></span>
              <i>订单管理</i>
            </a>
          </li>
          <li>
            <a href="./announcement.html" class="nav-link active">
              <span class="iconfont icon-gonggaoguanli"></span>
              <i>公告管理</i>
            </a>
          </li>
          <li>
            <a href="./UserManagement.html" class="nav-link link-dark">
              <span class="iconfont icon-yonghuguanli"></span>
              <i>用户管理</i>
            </a>
          </li>
        </ul>
      </div>
    </aside>
    <main>
      <div class="main-top">
        <p>公告管理</p>
        <span></span>
      </div>
      <div class="container mt-3 table table-bordered"
        style="background: #fff;padding:10px 15px 5px;position: relative;">
        <div style="height:100px;padding-top:10px;">
          <h5 style="font-weight: 600;margin-bottom: 24px;">公告列表</h5>
          <button type="button" data-bs-toggle="modal" data-bs-target="#myModalsAdd" class="btn btn-primary btn-lg"
            id="btnn">添加公告</button>
        </div>
        <table class="table table-hover table-bordered" style="text-align: center;margin-top: 15px;">
          <thead id="td">
            <tr>
              <th>公告编号</th>
              <th>公告标题</th>
              <th style="width: 600px;">广告内容</th>
              <th>发布时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="anntd">
          </tbody>
        </table>
        <!-- 分页 -->
        <div style="text-align: center;">
          <button class="btn_page" onclick="first()" id="first">首页</button>
          <button class="btn_page" onclick="up()">上一页</button>
          <button class="btn_page" onclick="down()">下一页</button>
          <button class="btn_page" onclick="last()">尾页</button>
        </div>
      </div>
    </main>

    <div>
      <!-- 添加模态框 -->
      <div class="modal fade" id="myModalsAdd">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">添加公告</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
              <form action="/action_page.php">
                <div class="row">
                  <div class="col">
                    公告标题: <input type="text" class="form-control" placeholder="标题" name="email" id="title">
                  </div>
                </div>
                <div class="mb-3 mt-3">
                  <label for="comment">请输入内容：</label>
                  <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
                </div>
              </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-success" onclick="addStudentInfo()">确认</button>
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div>
      <!-- 修改模态框 -->
      <div class="modal fade" id="myModalEdit">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <input type="hidden" id="updateID">
            <!-- 模态框头部 -->
            <div class="modal-header">
              <h4 class="modal-title">添加公告</h4>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 模态框内容 -->
            <div class="modal-body">
              <form action="/action_page.php">
                <div class="row">
                  <div class="col">
                    公告标题: <input type="text" class="form-control" placeholder="标题" name="email" id="uptitle">
                  </div>
                </div>
                <div class="mb-3 mt-3">
                  <label for="comment">请输入内容：</label>
                  <textarea class="form-control" rows="5" id="upcomment" name="text"></textarea>
                </div>
              </form>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
              <button type="button" class="btn btn-success" onclick="ok()">确认</button>
              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="../js/header.js"></script>
  <script src="../js/ann.js"></script>
</body>

</html>